<!--
 * @Author: 关棺 3156298705@qq.com
 * @Date: 2024-12-19 11:36:03
 * @LastEditors: 关棺 3156298705@qq.com
 * @LastEditTime: 2024-12-19 15:57:08
 * @FilePath: \supervision-ui\src\views\file\fileVersion\components\historyVersionDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    @close="handleClose"
    width="80%"
  >
    <!-- {{ fileList }} -->
    <el-table :data="fileList" style="width: 100%">
      <el-table-column prop="createBy" label="文件名称"></el-table-column>
      <el-table-column prop="infoExtend2" label="创建人"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="versionNumber" label="版本号"></el-table-column>
      <el-table-column label="文件列表" width="500">
        <template slot-scope="scope">
          <div
            v-for="(file, index) in scope.row.fileList"
            :key="index"
            class="file-item"
          >
            <span>{{ file.name1 }}</span>
            <el-button
              type="text"
              style="margin-left: 20px"
              @click="handleDownload(file)"
              >下载</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script>
import { listVersion } from "@/api/file/version";
export default {
  name: "HistoryVersionDialog",
  data() {
    return {
      title: "文件历史版本",
      visible: false,
      fileList: [], // 文件列表数据
      id: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileId: null,
        total: 0,
      },
      // 遮罩层
      loading: true,
      // 文件留言表格数据
      commentList: [],
      total: 0,
    };
  },
  methods: {
    // 初始化文件列表
    async init(id) {
      this.visible = true;
      this.queryParams.fileId = id;
      this.getList();
    },
    getList() {
      this.loading = true;

      // 调用接口获取数据
      listVersion(this.queryParams)
        .then((response) => {
          // 直接处理返回的数据
          this.fileList = response.rows.map((item) => ({
            ...item,
            fileList: this.parseFileList(item.versionPath),
          }));

          this.total = response.total;
          this.loading = false;
        })
        .catch((error) => {
          console.error("获取数据失败:", error);
          this.loading = false;
        });
    },

    // 解析文件路径的函数
    parseFileList(fileUrls) {
      if (!fileUrls) return [];

      return fileUrls.split(",").map((url) => {
        const fileName = url.split("/").pop();
        const fileExtension = fileName.split(".").pop();
        const nameWithoutExtension = fileName.split(".").slice(0, -1).join(".");
        const match = url.match(/[^/]+\.[^/]+$/);

        return {
          name: nameWithoutExtension,
          name1: match ? match[0] : fileName,
          type: fileExtension,
          url: url,
        };
      });
    },
    // 关闭对话框
    handleClose() {
      this.visible = false;
    },
    // 处理文件下载
    handleDownload(file) {
      if (!file.url) {
        this.$message.error("文件下载链接不存在！");
        return;
      }

      // 如果是 PDF 文件，强制下载
      if (file.url.endsWith(".pdf")) {
        this.downloadPdf(file);
      } else {
        // 其他文件类型直接下载
        const link = document.createElement("a");
        link.href = file.url;
        link.download = file.name || "download"; // 设置下载文件的名称
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    // 强制下载 PDF 文件
    downloadPdf(file) {
      fetch(file.url)
        .then((response) => response.blob())
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.download = file.name || "download.pdf"; // 设置下载文件的名称
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message.error("下载文件失败：" + error.message);
        });
    },
  },
};
</script>

<style scoped>
/* 自定义样式 */
.el-dialog__body {
  padding: 20px;
}

.el-table {
  font-size: 14px;
}

.el-button--text {
  font-size: 14px;
  color: #409eff;
}
</style>
